import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from './store'
import { useEffect, useRef, useState } from 'react'
import { history, useLocation } from 'umi'
import { SocketContainer } from '@/hooks/useSocket'
import dayjs from 'dayjs'
import btn_big_n from '@/resource/auctionManage/btn_big_n.png'
import btn_big_s from '@/resource/auctionManage/btn_big_s.png'

import HoverImage from './components/HoverImg'
import { useResize } from '@/hooks/useResize'
import CustomModal from './components/CustomModal'

let interval: any
export default observer(() => {
    const store = useLocalObservable(() => Store)
    const { send, onMessage, remove } = SocketContainer.useContainer()
    const [time, setTime] = useState(120)
    const [info, setInfo] = useState({ connect_num: 0 })
    const infoRef = useRef(info)
    const [visible, setVisible] = useState(false)

    useResize({ id: 'resize_container' })
    const {
        query: { student_num },
    }: any = useLocation()

    useEffect(() => {
        infoRef.current = info
    }, [info])

    useEffect(() => {
        document.title = '拍卖游戏'
        /** 状态流转 */
        const step_flow = (data: any) => {
            const { goto } = data
            switch (goto) {
                case 'form':
                    setInfo(data)
                    break
                default:
                    break
            }
        }

        /** 学生连接 */
        function connect({ data }: any) {
            setInfo(data)
        }
        onMessage('step_flow', step_flow)
        onMessage('connect', connect)

        /** 倒计时 */
        interval = setInterval(() => {
            setTime(v => {
                if (v === 0) {
                    clearInterval(interval)
                    return 0
                }
                return v - 1
            })
        }, 1000)

        function close({ data }: any) {
            const { connect_num } = data
            setInfo({ ...infoRef.current, connect_num })
        }

        /** 断连 */
        onMessage('close', close)

        return () => {
            clearInterval(interval)
            remove('step_flow', step_flow)
            remove('close', close)
        }
    }, [])

    return (
        <div className={styles.container}>
            <div id="resize_container">
                <div className={styles.block}>
                    <div className={styles.title}>填写:职业价值观拍卖表</div>
                    <div className={styles.content}>
                        按照要求填写我的职业价值观拍卖表，根据描述填写对应“我的预算金额”；通过自己对职位的要求，例如健康、赚钱能力、服务群体、生活意义、创新思维、休假与生活质量等等，权衡自己期望中的职位更需要哪些，大致需要对自己职业的所需提供一个参考方向，为接下来的拍卖游戏做好准备；
                        （鱼和熊掌、不可兼得！）
                    </div>
                </div>
                <div className={styles.info_wrapper}>
                    {time > 0 ? (
                        <>
                            <div className={styles.time}>{dayjs(time * 1000).format('mm:ss')}</div>
                            <div className={styles.tips}>填写中...</div>
                        </>
                    ) : (
                        <HoverImage
                            className={styles.next_btn}
                            placeholderSrc={btn_big_n}
                            src={btn_big_s}
                            onClick={() => {
                                setVisible(true)
                            }}
                            wait={500}
                        >
                            拍卖表统计
                        </HoverImage>
                    )}
                </div>
                <div className={styles.join_num}>
                    已加入<span>{info?.connect_num || 0}</span>/{student_num || 0}人
                </div>
            </div>
            <CustomModal
                title="提示"
                content={'若提交后，将提交所有学员的报表'}
                visible={visible}
                onOk={() => {
                    send('step_flow', { params: { step: '2' } })
                }}
                onClose={() => setVisible(false)}
            />
        </div>
    )
})
